<template>
  <div class="w750">
    <van-tabs
      v-model="active"
      :swipe-threshold="5"
      :color="themes.color"
      :title-active-color="themes.color"
      @change="switchType"
      sticky
      :offset-top='0'
    >
      <van-tab
        :title="item.name"
        v-for="(item, index) in navArr"
        :key="index"
      >
        <div class="account-det">
          <van-list
            v-if="paging.tab"
            v-model="paging.loading"
            :finished="paging.finished"
            :finished-text="!paging.emptylist?'没有更多了':''"
            @load="onLoad"
            :immediate-check="false"
            :error.sync="paging.error"
            error-text="请求失败，点击重新加载"
          >
            <div class="account-det-list">

              <div
                class="item"
                v-for="(order, index) in withdrawData"
                :key="index"
                @click="gowithdrawData(order.withdrawSn)"
              >
                <div class="item-left">
                  <p class="txt">{{order.withdrawSn}}</p>
                  <span class="time">{{order.applyTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <div class="item-right">
                  <span class="price"><em class="now">{{Money(order.amount)[0]}}</em>.{{Money(order.amount)[1]}}</span>
                  <span class="status" v-if="order.status == 50">提现成功</span>
                  <span class="status" v-if="order.status == 10">处理中</span>
                  <span class="status" v-if="order.status == -2">提现关闭</span>
                  <span class="status" v-if="order.status == -1">提现异常</span>
                  <span class="status" v-if="order.status == 30">处理中</span>
                  <span class="status" v-if="order.status == 20">处理中</span>
                </div>
              </div>

            </div>
          </van-list>
          <Noempty
            class="Noempty"
            :pic="require('../../../assets/images/record-empty.png')"
            :title="'您没有相关记录'"
            v-if="paging.emptylist && !paging.error"
          />
        </div>
      </van-tab>
    </van-tabs>
    <!-- /佣金明细 -->

  </div>
</template>

<script>
import Noempty from "components/Noempty/Noempty";
import cash from "utils/tool";
import {mapState} from 'vuex'
import { withdrawList ,integralWithdrawList} from "api/extensionApi";
import PageUtil from "utils/PageUtil";
let pageUtil = null

export default {
  data() {
    return {
      Money: cash,
      withdrawData: [],
      paging: {
        tab: false,
        loading: false,
        finished: false,
        error: false, // 是否错误
        emptylist: false // 是否显示列表为空时的样式
      },
      active: 0,
      status: "",
      navArr: [
        {
          name: "全部"
        },
        {
          name: "处理中"
        },
        {
          name: "已完成"
        }
      ]
    };
  },
  mounted() {
    let that = this;

    const apiTpye =  this.$route.query.source == 'integral' ? integralWithdrawList : withdrawList

    pageUtil = new PageUtil(apiTpye, {
      field: {
        list: "withdrawData"
      }
    });
    


	  let params = {status: this.status}
    this.promoteOrder(params)
	

  },
  methods: {

	promoteOrder(params) {
        let that = this
        pageUtil.loadListByPage(that, params)
  },
  switchType(index) {
		let that = this
		let switchNumber = index
		let status
		switch (switchNumber) {
			case 0:
				status = ' '
				break;
			case 1:
				status = 10
				break;
			case 2:
				status = 50
				break;
		}
		this.status = status
		let params = {status: this.status}
		this.promoteOrder(params)
	},
  onLoad() {
    //vant-list下拉加载方法
    pageUtil.loadListByPageMore();
  },
  gowithdrawData(withdrawSn) {
    
    let query = {
      withdrawSn
    }
    this.$route.query.source == 'integral' && (query.source = 'integral')

    this.$router.push({
      path: "/withdrawalResult",
      query
    });
  }
  },
  computed: {
    ...mapState(['themes']),
  },
  components: {
    Noempty
  }
};
</script>

<style src="../../../assets/css/pre-deposit.css" scoped></style>
